<div id="rulerTool" [ngStyle]="{width : windowWidth + 'px',height : windowHeight + 'px',position:position}" class="ScaleBox">
	<div [hidden]="!rulerToggle">
		<div id="levelRuler" class="ScaleRuler_h" (click)="levelDragRuler($event)">
			<span *ngFor="let item of xScale; let i = index" [ngStyle]="{left:i * 50 + 2 + 'px'}" class="n">{{item.id}}</span>
		</div>
		<div id="verticalRuler" class="ScaleRuler_v" (click)="verticalDragRuler($event)">
			<span *ngFor="let item of yScale; let i = index" [ngStyle]="{top:i * 50 + 2 + 'px'}" class="n">{{item.id}}</span>
		</div>

		<div id="levelDottedLine" [ngStyle]="{top:verticalDottedTop + 'px'}" class="RefDot_h">
			<span>{{verticalDottedTop-18}}</span>
		</div>
		<div id="verticalDottedLine" [ngStyle]="{left:levelDottedLeft + 'px'}" class="RefDot_v">
			<span>{{levelDottedLeft-18}}</span>
		</div>

		<div *ngFor="let item of levelLineList" [id]="item.id" [title]="item.title" [ngStyle]="{top:item.top+ 'px'}" class="RefLine_h"
		 (click)="dragLevelLine(item.id)"></div>
		<div *ngFor="let item of verticalLineList" [id]="item.id" [title]="item.title" [ngStyle]="{left:item.left+ 'px'}" class="RefLine_v"
		 (click)="dragVerticalLine(item.id)"></div>
	</div>

	<div id="contentRule" [ngStyle]="{left: contentLayout.left + 'px',top: contentLayout.top + 'px'}">
		<ng-content></ng-content>
	</div>
</div>